import React, { Component } from 'react';
// 级联选择器
import { Cascader,Tabs,Button  } from 'antd';
import './index.css'

// 引入组件
import Table from '../../components/Table'
const { TabPane } = Tabs;
export default class Params extends Component {
  state={
    /* 级联选择器数据 */
    sortList:[],
    /* 选中的id */
    myId:'',
    /* 传递的参数 */
    sel:'only'
  };
  /* 获取级联选择器数据 */
  getSortList=async ()=>{
    let result = await this.api.get('categories')
    if(result.meta.status === 200){
      this.setState({
        sortList:result.data
      })
    }
    // console.log(result);
  }
  /* 级联选择器数据 */
  componentDidMount(){
    this.getSortList()
    console.log(this.state.sel);
  }
  /* 级联选择器事件 */
  onChange =(value) => {
    console.log(value[value.length-1]);
    this.setState({
      myId:value[value.length-1]
    })
  }


  /* 标签页事件 */
  callback=(key)=>{
    console.log(key);
    this.setState({sel:key})
  }
  render(){
    /* 级联选择器 数据*/
    let fieldName =  {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      }
    const {sortList,myId,sel} = this.state
    return (
      <div className='ParamsBox'>
        {/* 级联选择器 */}
        <div>
          请选择商品分类:&emsp;
          <Cascader 
          options={sortList} 
          placeholder='请选择'
          fieldNames={fieldName} 
          onChange={this.onChange}
          style={{width:'200px'}}/>
        </div>
        <h2 className='text'>展示分类参数</h2>
        {/* 标签页 */}
        <Tabs defaultActiveKey="1" onChange={this.callback}>
          <TabPane tab="静态参数" key="only">
            <Button type="primary">添加静态参数</Button>
            {
              myId?<Table myId={myId} sel={sel}></Table>:''
            }
            
          </TabPane>
          <TabPane tab="动态参数" key="many">
            <Button type="primary">添加动态参数</Button>
            {
              myId?<Table myId={myId} sel={sel}></Table>:''
            }
          </TabPane>
        </Tabs>
      </div>
    )
  }
}
